<!--
  @Description:产品画册
  @Author:zqy
  @Date:2022-12-31 16:18:22
  @Last Modified by:zqy
  @Last Modified time:2022-12-31 16:18:22
-->
<template>
  <div :class="['photo-atlas',{'mine-container':!isInline}]">
    <MineHeader v-if="!isInline" arrow title="图册" />
    <div class="tabs-box" :style="{'top':offTop+'px','left':rectLeft+'px'}" @touchstart.stop="" @touchend.stop="" @touchmove.stop="">
      <ScrollTab v-model="confId" :list="tabList" value-key="id" label-key="atlasName" />
    </div>
    <div ref="tabCon" class="list-page">
      <div v-if="confId" class="content-list">
        <div :class="['c-title',{'inner-title':isInline}]">{{ tabName }}</div>
        <List
          v-if="confId"
          ref="list"
          class="list-page-container"
          :finished.sync="finished"
          :reset-fun="resetData"
          :load="load"
          :refresh="load"
          :offset="100"
          :finished-text="finishedText"
          :refresh-disabled="refreshDisabled"
        >
          <Cover
            v-for="(p,i) in list"
            :key="i"
            class="list-cover-item"
            :is-inline="isInline"
            :src="p.picUrl"
            :name="p.atlasName"
            @click.stop.native="cilckCoverHandle(p)"
          />
        </List>
      </div>
    </div>
  </div>
</template>
<script>
import List from '@/components/PageList'
import Cover from './components/Cover'
import ScrollTab from '@/components/ScrollTab'
import { getRootAtlas, getTreeById } from '@/apis/atlas'
import mixin from '../goods/Category/minxin'
export default {
  name: 'AtlasIndex',
  components: { ScrollTab, List, Cover },
  mixins: [mixin],
  props: {
    offTop: {
      // 距离顶部距离
      type: [Number, String],
      default: 44
    }
  },
  data() {
    return {
      fromID: this.$route.query.confId || '',
      confId: '',
      rectLeft: 0 // 距离左侧边界距离
    }
  },
  computed: {
    activeTabIndex() {
      const index = this.tabList.findIndex(v => v.id === this.confId)
      return index
    },
    tabName() {
      const obj = this.tabList[this.activeTabIndex]
      return (obj && obj.atlasName) || ''
    }
  },
  watch: {

  },
  created() {

  },
  activated() {

  },
  beforeRouteLeave(to, from, next) {
    const names = ['AtlasLastPreview', 'AtlasChild']
    if (!names.includes(to.name)) {
      this.$removeKeepAliveCache(this)
    }
    next()
  },
  mounted() {
    this.$nextTick(() => {
      const rect = this.$refs.tabCon.getBoundingClientRect()
      this.rectLeft = rect.left
    })
  },
  methods: {
    getTabList() {
      getRootAtlas().then(res => {
        const list = res.data || []

        this.tabList = list.filter(v => [1, '1'].includes(v.state) && ![1, '1'].includes(v.isDeleted))
        if (this.tabList.length === 0) {
          this.confId = ''
        } else {
          if (!this.fromID) {
            this.confId = this.tabList[0].id
          } else {
            const flag = this.tabList.some(v => v.id === this.fromID)
            if (!flag) {
              this.$dialog.confirm({
                // title: '提示',
                message: `图册【${this.$route.query.atlasName}】不可见，查看其他图册`,
                cancelButtonText: '返回上一页',
                confirmButtonText: '查看其他图册'
              }).then(() => {
                this.confId = this.tabList[0].id
              }).catch(() => {
                this.$router.go(-1)
              })
            } else {
              this.confId = this.fromID
            }
          }
        }
      })
    },
    load(page, rows) {
      /* const data = {
        page,
        rows,
        spaceConfId: this.confId
      } */
      return getTreeById(this.confId).then(res => {
        this.list = res.data || []
        this.finished = true
      })
    },
    cilckCoverHandle(p) {
      if (p.isLast === 1) {
        this.$router.push({ name: 'AtlasLastPreview', params: { id: p.id }, query: { atlasName: p.atlasName }})
      } else {
        this.$router.push({ name: 'AtlasChild', params: { id: p.id }, query: { atlasName: p.atlasName, levelType: p.levelType }})
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import url('../goods/Category/tab.less');

.photo-atlas{
  .list-cover-item + .list-cover-item{
    margin-top: 16px;
  }
}
</style>
